<template>
  <div class="page-container">
    <div class="page-header">
      <h1>{{ title }}</h1>
      <p v-if="description">{{ description }}</p>
    </div>

    <el-card>
      <div class="placeholder">
        <el-icon :size="64">
          <component :is="icon" />
        </el-icon>
        <h3>{{ title }}页面开发中</h3>
        <p v-if="content">{{ content }}</p>
        <div v-if="features && features.length > 0">
          <p>此页面将包含以下功能：</p>
          <ul>
            <li v-for="feature in features" :key="feature">{{ feature }}</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string;
  description?: string;
  icon: string;
  content?: string;
  features?: string[];
}

defineProps<Props>();
</script>

<style lang="scss" scoped>
.page-container {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px 0;
      font-size: 24px;
      color: var(--el-text-color-primary);
    }

    p {
      margin: 0;
      color: var(--el-text-color-regular);
    }
  }

  .placeholder {
    text-align: center;
    padding: 60px 20px;

    .el-icon {
      color: var(--el-color-primary);
      margin-bottom: 16px;
    }

    h3 {
      margin: 0 0 16px 0;
      color: var(--el-text-color-primary);
    }

    p {
      margin-bottom: 16px;
      color: var(--el-text-color-regular);
    }

    ul {
      text-align: left;
      display: inline-block;
      color: var(--el-text-color-regular);

      li {
        margin-bottom: 4px;
      }
    }
  }
}
</style>
